<!--
 * @Author: lmh
 * @Date: 2021-08-11 10:38:16
 * @LastEditTime: 2021-08-25 17:23:43
 * @LastEditors: lmh
 * @Description: 部门管理
-->
<template>
  <div class="contain">
    <a-button type="primary" shape="round" @click="handleAddDepartClick">添加部门</a-button>
    <div class="table-box">
      <a-table
        :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
        :columns="columns"
        :data-source="tableData"
        :pagination="{
          total: total,
          pageSizeOptions:['10','20','30','40','50'],
          'show-size-changer': true,
          'show-quick-jumper': true
        }"
        :scroll="{ y: tableHeight  }"
      >
        <template #operation="{ record }">
          <a-button
            type="link"
            size="small"
            @click="handleEditClick(record)"
            style="margin-right: 10px;"
          >编辑</a-button>
        </template>
      </a-table>
    </div>
    <a-modal
      v-model:visible="modalVisible"
      :title="modalType == 'edit' ? '修改部门':'添加部门'"
      :ok-text="modalType == 'edit' ? '确认修改':'确认添加'"
      cancel-text="取消"
      @ok="hideRoleModal"
    >
      <a-form ref="formRef" :model="formState" :rules="rules">
        <a-form-item v-if="modalType == 'edit'" label="部门编号">{{ formState.id }}</a-form-item>
        <a-form-item ref="departmentName" label="部门名称" name="departmentName">
          <a-input v-model:value="formState.departmentName" />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
import { reactive, toRefs, ref, toRaw, onMounted } from 'vue';
import { getDepartList, editDepart, addDepart } from '../../service/department';
export default {
  setup() {
    const formRef = ref();
    const data = reactive({
      visible: false,
      columns: [
        {
          title: '部门编号',
          dataIndex: 'id',
        },
        {
          title: '部门名称',
          dataIndex: 'departmentName',
        },
        {
          title: '操作',
          dataIndex: 'operation',
          slots: { customRender: 'operation' },
        },
      ],
      selectedRowKeys: [],
      tableData: [],
      total: 0,
      tableHeight: document.documentElement.clientHeight + 'px',
      modalVisible: false,
      modalType: 'edit',
      formState: {
        id: '',
        departmentName: '',
      },
    });
    const rules = {
      departmentName: [
        {
          required: true,
          message: '请输入部门名称',
          trigger: 'blur',
        },
      ],
    };

    onMounted(() => {
      data.tableHeight = document.querySelector('.contain').clientHeight - 180 + 'px';
      window.onresize = function () {
        data.tableHeight = document.querySelector('.contain').clientHeight - 180 + 'px';
      };
      const req = {
        pageNo: 1,
        pageSize: 999999,
      };
      getList(req);
    });

    const getList = param => {
      getDepartList(param).then(res => {
        if (res && res.data) {
          data.total = res.data.total;
          data.tableData = res.data.records;
        }
      });
    };

    const onSelectChange = selectedRowKeys => {
      console.log('selectedRowKeys changed: ', selectedRowKeys);
      data.selectedRowKeys = selectedRowKeys;
    };
    const handleEditClick = param => {
      data.modalType = 'edit';
      data.formState = { ...param };
      data.modalVisible = true;
    };

    const handleAddDepartClick = () => {
      data.modalType = 'add';
      data.formState = {};
      data.modalVisible = true;
    };

    const hideRoleModal = () => {
      console.log(formRef);
      formRef.value
        .validate()
        .then(() => {
          console.log('values', data.formState, toRaw(data.formState));
        })
        .catch(error => {
          console.log('error', error);
        });
    };

    return {
      onSelectChange,
      handleEditClick,
      handleAddDepartClick,
      hideRoleModal,
      ...toRefs(data),
      getList,
      rules,
      formRef,
    };
  },
};
</script>

<style scoped>
.contain {
  padding: 20px;
  height: calc(100% - 22px);
}
.table-box {
  margin-top: 20px;
  height: calc(100% - 42px);
}
</style>
